<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <!-- 顶部导航 -->
    <bossNavigation class="sticky top-0 z-50"></bossNavigation>
    
    <header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800"></header>
    <div class="relative w-full bg-blue-600" style="height: 600px;">
      <div class="absolute top-32" style="left: 100px; width: 750px; height: 400px;">
        <p class="text-5xl text-slate-200 mb-8">发现和培养杰出人才</p>
        <span class="text-2xl block mb-8 text-slate-100">通过数据驱动的方式，帮助企业发现、培养和留住优秀人才，打造高效能团队。</span>
        <button class="block w-30 h-12 px-4 py-2 bg-white text-blue-800 rounded-lg hover:bg-blue-100 !rounded-button whitespace-nowrap">开始使用</button>
      </div>
      <div class="absolute top-20 right-10">
        <img src="/src/assets/img/66.png" width="600px" height="500px" alt="">
      </div>
    </div>
    <!-- 横向滚动公告栏 -->
    <div ref="noticeBarRef" class="notice-bar">
      <div class="notice-content" ref="noticeContentRef">
        <div
          class="notice-item"
          v-for="(item, index) in noticeData"
          :key="index"
        >
          {{ item.content }}
        </div>
      </div>
    </div>
    
    <!-- 人才区域 -->
    <div class="max-w-7xl mx-auto">
      <div class="bg-gray-50 py-10 px-4 sm:px-6">
        <div class="max-w-7xl mx-auto">
          <!-- 标题 -->
          <h2 class="text-4xl font-bold text-blue-400 mb-12 text-center">杰出人才展示</h2>
          
          <!-- 横向卡片容器 -->
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div 
              v-for="(rank, index) in excellentPerson" 
              :key="rank.stuAccount"
              class="rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1 cursor-pointer"
              @click="onSearchByStuAccount(rank.stuAccount)"
              :class="[
                index === 0 ? 'bg-gradient-to-br from-yellow-50 to-yellow-500 border-l-4 border-yellow-400' : 
                index === 1 ? 'bg-gradient-to-br from-gray-50 to-gray-300 border-l-4 border-gray-400' : 
                'bg-gradient-to-br from-amber-50 to-amber-100 border-l-4 border-amber-500'
              ]"
            >
              <div class="p-6">
                <!-- 排名标识 -->
                <div class="flex justify-between items-start mb-4">
                  <span class="text-xs font-semibold px-2 py-1 rounded"
                    :class="[
                      index === 0 ? 'bg-yellow-200 text-yellow-800' : 
                      index === 1 ? 'bg-gray-200 text-gray-800' : 
                      'bg-amber-400 text-amber-800'
                    ]">
                    TOP {{ index + 1 }}
                  </span>
                  <span class="text-sm text-gray-500">{{ rank.major || '计算机科学' }}</span>
                </div>
                
                <!-- 主要内容 -->
                <div class="flex items-center">
                  <!-- 头像 -->
                  <div class="relative mr-4">
                    <img
                      :src="rank.image"
                      :alt="rank.name"
                      class="w-16 h-16 rounded-full object-cover border-4"
                      :class="[
                        index === 0 ? 'border-yellow-300' : 
                        index === 1 ? 'border-gray-300' : 
                        'border-amber-300'
                      ]"
                    />
                  </div>
                  
                  <!-- 信息 -->
                  <div class="flex-1">
                    <h3 class="text-xl font-bold text-gray-800">{{ rank.name }}</h3>
                    <div class="flex items-center mt-1">
                      <span class="text-blue-600 font-bold text-lg mr-2">
                        {{
                          rank.competitionAvgScore ||
                          rank.practiceAvgScore ||
                          rank.itemAvgScore
                        }}
                      </span>
                      <span class="text-sm text-gray-500">综合评分</span>
                    </div>
                  </div>
                </div>
                
                <!-- 标签和描述 -->
                <div class="mt-4 pt-4 border-t border-gray-200">
                  <span class="inline-block px-3 py-1 rounded-full text-sm font-semibold mb-2"
                    :class="[
                      index === 0 ? 'bg-yellow-100 text-yellow-800' : 
                      index === 1 ? 'bg-gray-100 text-gray-800' : 
                      'bg-amber-100 text-amber-800'
                    ]">
                    {{ index === 0 ? "竞赛成绩优异" : index === 1 ? "项目经验丰富" : "实习经验丰富" }}
                  </span>
                  <p class="text-sm text-gray-600 line-clamp-2">
                    {{ rank.bio || '该同学在相关领域表现突出，具有丰富的实践经验和扎实的理论基础' }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <h2 class="text-4xl font-bold text-blue-400
       mb-6 text-center">人才市场展示</h2>
      
      <div class="flex items-center gap-4 mb-6">
        <!-- 搜索和筛选部分 -->
        <div class="flex-1 relative search-input-container">
          <el-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
            <Search />
          </el-icon>
          <input
            type="text"
            placeholder="搜索人才名字"
            v-model="userName"
            @keyup.enter="onSearch"
            class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
          />
        </div>
        
        <el-select
          v-model="selectedMajor"
          placeholder="专业要求"
          @change="onSearch"
          class="w-40"
        >
          <el-option
            v-for="major in majorOptions"
            :key="major"
            :label="major"
            :value="major"
          />
        </el-select>
        
        <el-select
          v-model="selectedPosition"
          placeholder="意向岗位要求"
          @change="onSearch"
          class="w-40"
        >
          <el-option
            v-for="position in intendedPositionOptions"
            :key="position"
            :label="position"
            :value="position"
          />
        </el-select>
      </div>
      
      <!-- 多列布局 -->
      <div class="grid grid-cols-3 gap-6">
      <div
        v-for="talent in talents"
        :key="talent.id"
        class="bg-white rounded-lg shadow-sm p-6 cursor-pointer hover:shadow-md transition-all duration-300 hover:-translate-y-1"
        @click="showDetail(talent)"
      >
        <div class="flex items-start gap-4">
          <img
            :src="talent.imageUrl"
            :alt="talent.name"
            class="w-16 h-16 rounded-full object-cover border-2 border-gray-100"
          />
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between">
              <div class="truncate">
                <h3 class="text-lg font-medium text-gray-800 truncate">{{ talent.name }}</h3>
                <p class="text-gray-600 mt-1 truncate">
                  {{ talent.intendedPosition }}
                </p>
                <div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
                  <span class="truncate">{{ talent.major }}</span>
                </div>
              </div>
              <div class="flex flex-col items-center ml-2">
                <el-progress
                  type="dashboard"
                  :percentage="talent.totalScore"
                  :width="70"
                  :height="50"
                  :stroke-width="8"
                  :format="(percentage) => `${percentage}分`"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="mt-4" style="height: 220px">
          <div
            ref="chartRefs"
            :id="`chart-${talent.id}`"
            class="w-full h-48"
          ></div>
        </div>

        <div class="mt-4 flex flex-wrap gap-2">
          <span
            v-for="tag in talent.skills"
            :key="tag"
            class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-full hover:bg-blue-100 transition-colors duration-200"
          >
            {{ tag }}
          </span>
        </div>

        <div class="mt-4 flex justify-end">
          <button
            class="px-4 py-1.5 text-sm bg-blue-500 text-white hover:bg-blue-600 rounded-lg transition-colors duration-300"
            @click.stop="showDetail(talent)"
          >
            查看详情
          </button>
        </div>
      </div>
    </div>
  </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-16 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-4xl font-bold text-center mb-12 text-gray-800 dark:text-white">推荐项目</h2>
  
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- 高潜人才培养计划 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700 hover:-translate-y-1">
      <div class="p-6 w-full">
        <img src="/src/assets/img/44.png" alt="" class="mb-5">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">高潜人才培养计划</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-5">为期6个月的深度培养项目，助力高潜人才快速成长</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
              <span>已有178人参与</span>
            </div>
          </div>
          <button class="mt-20 bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg transition-colors duration-300 ml-4">
            立即进入
          </button>
        </div>
      </div>
    </div>

    <!-- 领导力提升项目 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700 hover:-translate-y-1">
      <div class="p-6 w-full">
        <img src="/src/assets/img/55.png" alt="" class="mb-5">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">领导力提升项目</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-5">系统化的领导力培训课程，打造优秀管理者</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
              <span>已有80人参与</span>
            </div>
          </div>
          <button class="mt-20 bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg transition-colors duration-300 ml-4">
            立即进入
          </button>
        </div>
      </div>
    </div>

    <!-- 专业技能提升班 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700 hover:-translate-y-1">
      <div class="p-6 w-full">
        <img src="/src/assets/img/77.png" alt="" class="mb-5">
        <div class="flex justify-between items-start">
          <div class="flex-1">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-3">专业技能提升班</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-5">针对性的技能培训，快速提升核心竞争力</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
              <span>已有235人参与</span>
            </div>
          </div>
          <button class="mt-20 bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg transition-colors duration-300 ml-4">
            立即进入
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--底部导航栏-->
<footer class="bg-gray-900 text-gray-100 py-12 px-6 w-full">
  <div class="container mx-auto max-w-6xl">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
      <!-- 关于我们 -->
      <div>
        <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">关于我们</h3>
        <ul class="space-y-6 text-lg">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">公司介绍</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">团队文化</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">加入我们</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">联系方式</a></li>
        </ul>
      </div>
      
      <!-- 产品服务 -->
      <div>
        <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">产品服务</h3>
        <ul class="space-y-6 text-lg">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">人才评价</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">能力培养</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">职业规划</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">企业咨询</a></li>
        </ul>
      </div>
      
      <!-- 资源中心 -->
      <div>
        <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">资源中心</h3>
        <ul class="space-y-6 text-lg">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">学习资料</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">案例分享</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">行业报告</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">帮助中心</a></li>
        </ul>
      </div>
      
      
      <!-- 关注我们 -->
<div>
  <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">关注我们</h3>
  <div class="flex space-x-5">
    <a href="#" class="group">
      <img 
        src="/src/assets/img/微信.png" 
        alt="微信"
        class="w-7 h-7 transition-opacity duration-300 group-hover:opacity-80"
      />
    </a>
    <a href="#" class="group">
      <img 
        src="/src/assets/img/微博.png" 
        alt="微博"
        class="w-7 h-7 transition-opacity duration-300 group-hover:opacity-80"
      />
    </a>
    <a href="#" class="group">
      <img 
        src="/src/assets/img/抖音.png" 
        alt="抖音"
        class="w-7 h-7 transition-opacity duration-300 group-hover:opacity-80"
      />
    </a>
  </div>
  <div class="mt-6 text-gray-400 text-sm">
    <p>扫描二维码关注公众号</p>
    <!-- 二维码图片替换 -->
    <div class="mt-2">
      <img 
        src="/src/assets/img/二维码.jpg" 
        alt="公众号二维码"
        class="w-24 h-24 object-contain"
      />
    </div>
  </div>
</div>
    </div>
    
    <!-- 版权信息 -->
    <div class="border-t border-gray-800 mt-12 pt-8 text-center">
      <p class="text-gray-500 text-sm">© 2024 人才成长指数平台 保留所有权利</p>
      <div class="mt-2 flex justify-center space-x-4 text-xs text-gray-600">
        <a href="#" class="hover:text-gray-300">隐私政策</a>
        <a href="#" class="hover:text-gray-300">服务条款</a>
        <a href="#" class="hover:text-gray-300">法律声明</a>
      </div>
    </div>
  </div>
</footer>
    
    <!-- 详情弹窗 -->
    <el-dialog
  v-model="dialogVisible"
  width="1000px" 
  :title="selectedTalent?.name"
  destroy-on-close
  class="talent-detail-dialog"
>
  <div v-if="selectedTalent" class="relative">
    <!-- 顶部信息卡片 - 独占整行 -->
    <div class="flex flex-col sm:flex-row items-start gap-6 p-6 bg-gray-50 rounded-xl shadow-sm border border-gray-100 mb-6">
      <img
        :src="selectedTalent.imageUrl"
        :alt="selectedTalent.name"
        class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-md"
      />
      <div class="flex-1 min-w-0">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h3 class="text-2xl font-bold text-gray-800 flex items-center gap-3">
              {{ selectedTalent.name }}
              <span class="text-lg font-normal text-gray-500">
                {{ selectedTalent.title }}
              </span>
            </h3>
            <div class="mt-3 space-y-2 text-gray-600">
              <p class="flex items-center gap-2">
                <el-icon><User /></el-icon>
                <span>{{ selectedTalent.education }} | {{ selectedTalent.major }}</span>
              </p>
              <p class="flex items-center gap-2">
                <el-icon><Briefcase /></el-icon>
                <span>实习经历：{{ selectedTalent.companyInternships.length }}段</span>
              </p>
              <p class="flex items-center gap-2">
                <el-icon><Document /></el-icon>
                <span>项目经历：{{ selectedTalent.items.length }}段</span>
              </p>
              <p class="flex items-center gap-2">
                <el-icon><Aim /></el-icon>
                <span>期望职位：{{ selectedTalent.intendedPosition }}</span>
              </p>
            </div>
          </div>
          <div class="bg-white p-4 rounded-lg shadow-sm min-w-[120px] text-center">
            <div class="text-4xl font-bold text-blue-600">
              {{ selectedTalent.totalScore }}
            </div>
            <div class="text-sm text-gray-500 mt-1">综合评分</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主体内容 - 左右等宽分栏 -->
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左栏 -->
      <div class="lg:w-1/2 space-y-6">  <!-- 改为精确的1/2宽度 -->
        <!-- 得分评估图表 -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 h-full">
          <h4 class="text-xl font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <el-icon class="text-blue-500"><PieChart /></el-icon>
            得分评估
          </h4>
          <div ref="detailChartRef" class="w-full h-72"></div>
        </div>
      </div>
      
      <!-- 右栏 -->
      <div class="lg:w-1/2 space-y-6">  <!-- 改为精确的1/2宽度 -->
        <!-- 掌握技能 -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
          <h4 class="text-xl font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <el-icon class="text-blue-500"><Star /></el-icon>
            掌握技能
          </h4>
          <div class="space-y-4">
            <div
              v-for="(skill, index) in selectedTalent.scoreDistribution"
              :key="index"
              class="bg-gray-50 p-4 rounded-lg hover:shadow-md transition-all duration-200"
            >
              <div class="flex items-center justify-between mb-3">
                <span class="text-gray-700 font-medium">
                  {{ ["课业成绩", "实习表现", "项目经验", "竞赛成绩", "通用技能"][index] }}
                </span>
                <span class="text-blue-600 font-bold">{{ skill }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div
                  class="bg-gradient-to-r from-blue-400 to-blue-600 h-2.5 rounded-full transition-all duration-500"
                  :style="{ width: skill + '%' }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行 - 左右等宽分栏 -->
    <div class="flex flex-col lg:flex-row gap-6 mt-6">
      <!-- 左栏 -->
      <div class="lg:w-1/2 space-y-6">
        <!-- 实习经历 -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 h-full">
          <h4 class="text-xl font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <el-icon class="text-blue-500"><OfficeBuilding /></el-icon>
            实习经历
          </h4>
          <el-timeline>
            <el-timeline-item 
              v-for="exp in selectedTalent.companyInternships" 
              :key="exp.id"
              :timestamp="`${exp.internshipStarttime ? exp.internshipStarttime.substring(0, 10) : ''} - ${exp.internshipEndtime ? exp.internshipEndtime.substring(0, 10) : ''}`"
              class="!pb-5"
            >
              <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <h4 class="font-bold text-blue-600">{{ exp.companyId }}</h4>
                <p class="text-gray-600 mt-2 flex items-center gap-2">
                  <el-icon class="text-gray-400"><Position /></el-icon>
                  {{ exp.position }}
                </p>
                <p class="text-sm text-gray-500 mt-3 leading-relaxed">
                  {{ exp.internshipSuccess }}
                </p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      
      <!-- 右栏 -->
      <div class="lg:w-1/2 space-y-6">
        <!-- 项目经历 -->
        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 h-full">
          <h4 class="text-xl font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <el-icon class="text-blue-500"><Collection /></el-icon>
            项目经历
          </h4>
          <el-timeline>
            <el-timeline-item 
              v-for="exp in selectedTalent.items" 
              :key="exp.id"
              :timestamp="`${exp.itemStartTime ? exp.itemStartTime.substring(0, 10) : ''} - ${exp.itemEndTime ? exp.itemEndTime.substring(0, 10) : ''}`"
              class="!pb-5"
            >
              <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <h4 class="font-bold text-blue-600">{{ exp.itemName }}</h4>
                <p class="text-gray-600 mt-2 flex items-center gap-2">
                  <el-icon class="text-gray-400"><Position /></el-icon>
                  {{ exp.itemPositionName }}
                </p>
                <p class="text-sm text-gray-500 mt-3 leading-relaxed">
                  {{ exp.description }}
                </p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>

    <!-- 第三行 - 荣誉奖项独占一行 -->
    <div class="mt-6 bg-white p-6 rounded-xl shadow-sm border border-gray-100">
      <h4 class="text-xl font-semibold text-gray-800 mb-5 flex items-center gap-2">
        <el-icon class="text-blue-500"><Trophy /></el-icon>
        荣誉奖项
      </h4>
      <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 text-gray-600">
        {{ selectedTalent.awards || "暂无荣誉奖项信息" }}
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="mt-8 flex justify-end gap-4">
      <el-button
        class="!rounded-lg !px-6 !py-2.5 !text-base !font-medium !border-gray-300 hover:!bg-gray-50"
        @click="dialogVisible = false"
      >
        关闭
      </el-button>
      <el-button
        type="primary"
        class="!rounded-lg !px-6 !py-2.5 !text-base !font-medium"
        @click="contactTalent"
      >
        <el-icon class="mr-1.5"><Message /></el-icon>
        发送邮件
      </el-button>
    </div>
  </div>
</el-dialog>
    
    <!-- 邮件发送弹窗 -->
    <el-dialog
      v-model="mailDialogVisible"
      title="发送邮件"
      width="600px"
      destroy-on-close
    >
      <div class="space-y-4">
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">发件人：</div>
          <div class="flex-1 flex items-center gap-2">
            <img :src="bossAvatar" :alt="selectedTalent?.name" class="w-8 h-8 rounded-full object-cover" />
            <span>{{ bossName }}</span>
          </div>
        </div>
        
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">收件人：</div>
          <div class="flex-1 flex items-center gap-2">
            <img
              :src="selectedTalent?.imageUrl"
              :alt="selectedTalent?.name"
              class="w-8 h-8 rounded-full object-cover"
            />
            <span>{{ selectedTalent?.name }}</span>
          </div>
        </div>
        
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">主题：</div>
          <el-input v-model="mailForm.title" placeholder="请输入邮件主题" class="flex-1" />
        </div>
        
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">正文：</div>
          <el-input
            v-model="mailForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入邮件内容"
            class="flex-1"
          />
        </div>
      </div>
      
      <template #footer>
        <div class="flex justify-end gap-4">
          <button
            class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap"
            @click="mailDialogVisible = false"
          >
            取消
          </button>
          <button 
            class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap"
            @click="sendMail(selectedTalent.account)"
          >
            发送
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { Search, View } from '@element-plus/icons-vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { Swiper, SwiperSlide } from 'swiper/vue'
import bossNavigation from '../../views/bossNavigation.vue'
import { Pagination, Autoplay } from 'swiper/modules'
import { useRouter, useRoute } from 'vue-router'
import { 
  getThreeBest, 
  getMajorList, 
  getIntendedPosition, 
  getExcellentTalents 
} from '../../api/boss/boss'
import { getEmployer } from "../../api/boss/boss.js"
import { addEmail } from '../../api/student/email/email'
import { getAnnouncementList } from "../../api/student/qualityReport/qualityReport"

// Boss基本信息
const bossAvatar = ref()
const bossName = ref()
const bossAccount = ref()

function get_employer(data) {
  getEmployer(data).then(function(response) {
    bossAvatar.value = response.user.userImg
    bossName.value = response.user.userName
    bossAccount.value = response.user.account
  })
}

const router = useRouter()
const swiperModules = [Pagination, Autoplay]
const education = ref("")
const skill = ref("")
const dialogVisible = ref(false)
const selectedTalent = ref(null)
const chartRefs = ref([])
const detailChartRef = ref()
const majorOptions = ref([])
const intendedPositionOptions = ref([])
const selectedMajor = ref(null)
const selectedPosition = ref(null)
const userName = ref()
const account = ref()
const noticeBarRef = ref(null)
const noticeContentRef = ref(null)
const noticeData = ref([])
const excellentPerson = ref([])
const talents = ref([
  {
    id: 1,
    account: '',
    name: '林志远',
    intendedPosition: '全栈开发工程师',
    major: '计算机科学',
    totalScore: 92,
    experience: 3,
    imageUrl: "<url id='cus1jnp3ntnmlrcdfeu0' type='url' status='failed' title='' wc='0'>https://ai-public.mastergo.com/ai/img_res/26d83890af9c8cf892b83694ee4235f7.jpg</url>",
    skills: ["Vue.js", "React", "Node.js"],
    scoreDistribution: [85, 80, 90, 75, 85],
    awards: "荣誉奖项",
    companyInternships: [
      {
        id: 1,
        companyId: '科技创新有限公司',
        position: '前端开发工程师',
        internshipStarttime: '2020-2023',
        internshipEndtime: '',
        internshipSuccess: '负责公司核心产品的前端开发工作，实现了多个关键功能模块',
      },
      {
        company: "互联网科技有限公司",
        position: "初级前端工程师",
        time: "2018-2020",
        description: "参与企业官网改版项目，负责页面开发和性能优化",
      },
    ],
    items: [
      {
        id: 1,
        itemName: '科技创新有限公司',
        itemPositionName: '前端开发工程师',
        itemStartTime: '2020-2023',
        itemEndTime: '',
        itemLight: '负责公司核心产品的前端开发工作，实现了多个关键功能模块',
        description: '项目描述',
      },
    ],
  },
])

const getChartOption = (skills) => {
  return {
    animation: true,
    grid: {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20,
      containLabel: true
    },
    radar: {
      radius: '65%',
      center: ['50%', '52%'],
      indicator: [
        { name: "课业平均分", max: 100 },
        { name: "实习平均分", max: 100 },
        { name: "项目平均分", max: 100 },
        { name: "竞赛平均分", max: 100 },
        { name: "技能平均分", max: 100 }
      ],
      axisName: {
        fontSize: 12,
        color: '#666'
      },
      splitArea: { show: false }
    },
    series: [{
      type: "radar",
      data: [{
        value: skills,
        areaStyle: { 
          color: "rgba(59, 130, 246, 0.3)",
        },
        lineStyle: {
          width: 2,
          color: "#3b82f6"
        },
        symbolSize: 6
      }]
    }]
  }
}

const isLoggedIn = ref(localStorage.getItem('userInfo'))
const showDetail = (talent) => {
  if (isLoggedIn.value === null) {
    ElMessage({
      message: "请先登录/注册后查看人才详情",
      type: "warning",
    })
    return
  }
  selectedTalent.value = talent
  dialogVisible.value = true
  setTimeout(() => {
    if (detailChartRef.value) {
      const chart = echarts.init(detailChartRef.value)
      chart.setOption(getChartOption(talent.scoreDistribution))
    }
  })
}

// 发送邮件
const mailForm = ref({
  title: '',
  content: '',
})
const mailDialogVisible = ref(false)

const contactTalent = () => {
  mailDialogVisible.value = true
}

const sendMail = (stuAccount) => {
  if (!mailForm.value.content && !mailForm.value.title) {
    ElMessage.error("主题和邮件内容不能为空")
    return
  }

  // 构建新的发送消息
  const newMail = {
    sendAccount: bossAccount.value,
    receiveAccount: stuAccount,
    title: `${mailForm.value.title}`,
    content: mailForm.value.content,
    status: 1,
    type: "个人邮件"
  }
  
  // 添加到发件箱
  addEmail(newMail).then(function(response) {
    ElMessage.success("回复成功")
    mailDialogVisible.value = false
    dialogVisible.value = false
    mailForm.value = {
      title: '',
      content: '',
    }
  })
}

onMounted(async () => {
  // 通知列表
  let params = {
    pageNum: 1,
    pageSize: 5,
  }
  const data = await getAnnouncementList(params)
  console.log("data:", data)
  
  if (data.rows) {
    noticeData.value = data.rows

    nextTick(() => {
      if (noticeContentRef.value) {
        const content = noticeContentRef.value
        content.innerHTML += content.innerHTML // 克隆内容实现无缝滚动
      }
    })
  } else {
    console.error("后端返回的数据格式不符合预期")
  }

  nextTick(() => {
    if (noticeBarRef.value && noticeContentRef.value) {
      const noticeBar = noticeBarRef.value
      const content = noticeContentRef.value

      function startScroll() {
        let lastTime = 0
        const speed = 30 // 像素/秒

        function animate(timestamp) {
          if (!lastTime) lastTime = timestamp
          const delta = timestamp - lastTime

          if (delta > 16) { // 约60FPS
            const deltaPx = (speed * delta) / 1000
            noticeBar.scrollLeft += deltaPx

            if (noticeBar.scrollLeft >= content.offsetWidth / 2) {
              noticeBar.scrollLeft = 0
            }

            lastTime = timestamp
          }
        }
      }

      function stopScroll() {
        cancelAnimationFrame(scrollRequest)
      }

      noticeBar.addEventListener('mouseenter', stopScroll)
      noticeBar.addEventListener('mouseleave', startScroll)
      startScroll()
    }
  })
 
  // 查询三个杰出人才：实习、项目、竞赛
  excellentPerson.value = await getThreeBest()

  // 查询可选的专业列表
  majorOptions.value = await getMajorList()
  
  // 查询可选的意向岗位列表
  intendedPositionOptions.value = await getIntendedPosition()

  // 获取优秀人才列表
  const res = await getExcellentTalents({
    account: account.value,
    userName: userName.value,
    major: selectedMajor.value,
    position: selectedPosition.value,
  })

  if (res == 'DATA_NOT_EXIST') {
    ElMessage.warning("未查询到优秀人才")
    return
  }
  talents.value = res

  await nextTick()
  talents.value.forEach((talent, index) => {
    if (chartRefs.value[index]) {
      const chartDom = document.getElementById(`chart-${talent.id}`)
      if (chartDom) {
        const chart = echarts.init(chartDom)
        chart.setOption(getChartOption(talent.scoreDistribution))
      }
    }
  })
})

const onSearch = async (params) => {
  const res = await getExcellentTalents({
    account: params?.stuAccount || account.value,
    userName: userName.value,
    major: selectedMajor.value,
    position: selectedPosition.value,
  })
  
  if (res) {
    ElMessage.warning("未查询到优秀人才")
    return
  }
  talents.value = res

  await nextTick()
  talents.value.forEach((talent, index) => {
    if (chartRefs.value[index]) {
      const chartDom = document.getElementById(`chart-${talent.id}`)
      if (chartDom) {
        const chart = echarts.init(chartDom)
        chart.setOption(getChartOption(talent.scoreDistribution))
      }
    }
  })
}

const onSearchByStuAccount = (stuAccount) => {
  onSearch({ stuAccount })
}
</script>

<style scoped>
.el-select {
  width: 160px;
}

.search-input-container {
  position: relative;
  width: 100%;
}

.search-input-container .el-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  /* 确保图标不会干扰输入框的点击事件 */
}

.search-input-container input {
  padding-left: 2.5rem;
  /* 确保输入框的内容不会被图标遮挡 */
}

@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.notice-bar {
  height: 30px;
  margin: 16px;
  padding: 0 10px;
  background: linear-gradient(90deg, var(--primary-color) 10%, var(--bg-color) 90%);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

.notice-content {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 100%;
  animation: scroll 30s linear infinite;
}

.notice-item {
  margin-right: 4rem;
  padding: 0 1rem;
  position: relative;
}
</style>